import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // data保存的是自己组建内部的私有数据 
  // state中的数据 在项目中的任何一个组件/页面中都可以通过特定的方式获取到
  state: {
    count: 10,
  },
  // 类似于组件中的计算属性
  getters: {
    // 拿到state中的 count 进行 乘以10 的操作
    // getters 默认的第一个参数 state 
    multiplyCount(state) {
      return state.count * 10;
    },
    // 先获取multiplyCount的结果，并且 将它的结果 做一个平方
    // getters第二个默认提供的参数 就是它自己
    multiplyCountSquare: (state, getters) => {
      return getters.multiplyCount * getters.multiplyCount
    }
  },
  // 类似于组件中的methods
  // mutations中只允许进行同步操作
  mutations: {
    // 改变state中count的状态  +1
    // 默认的第一个参数 state
    // 默认的第二个参数 payload 载荷/外界传递进来的参数
    increment(state, payload) {
      console.log(payload);
      // 变更状态
      state.count += payload.hCount
    }
  },
  actions: {
    // 在组件中进行分发时也可传递参数
    // this.$store.dispatch("incrementAsync", { aCount: 20 });  
    // context 上下文 在当前的环境中 指代的就是 store
    // 异步操作 -》 发送网络请求 -> 延时操作
    incrementAsync(context, param) {
      // 延时函数 单位是 ms
      setTimeout(() => {
        context.commit('increment', param)
      }, 2000);
    },
  },
  modules: {
  }
})

// vuex整体的使用的一个流程
// 针对在真实的开发环境下
// 1.在Actions 进行异步交互请求，获取到要使用的数据，将这个数据通过commit提交给mutations
// 2.在mutations中对应的方法内我们使用载荷/传递过来的参数 拿到actions传递过来的数据
// 3.在mutations中能过获取到state中的变量，将actions提交过来的数据进行赋值操作
// 4.组件里直接使用state中的数据即可
